<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />
    <title>Services - Botany Template</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <!--
    Botany Template
    http://www.templatemo.com/preview/templatemo_391_botany
    -->
    <link href="../static/css/font-awesome.min.css" rel="stylesheet">
    <link href="../static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="../static/css/templatemo_style.css" rel="stylesheet" type="text/css">

    <!-- HTML 5 shim for IE backwards compatibility -->
        <!-- [if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
        </script>
        <![endif]-->
    <!--
    Credits
    Equal Height Columns - http://www.hongkiat.com/blog/css-equal-height/
    Font Awesome by Dave Gandy - http://fontawesome.io
--><style>
        label {
            color: white;
        }
    </style>
</head>
<body class="templatemo_flower_1">
    <div id="main_container">
        <div class="container" id="services">
            <div class="row col-wrap">
                <div id="left_container" class="col col-md-3 col-sm-12">
                    <div class="templatemo_logo">
                        <a href="#"><img src="../static/images/templatemo_logo.png" alt="Botany Theme"></a>
                    </div>
                    <nav id="main_nav">
                        <ul class="nav">
                            <li><a href="index.html">首页</a></li>
                            <li><a href="about.html">数据收集</a></li>
                            <li class="active"><a href="services.html">每月pm2.5总和分析</a></li>
                            <li><a href="portfolio.html">每月so2平均指数分析</a></li>
                            <li><a href="contact.html">全年空气质量等级分析</a></li>
                        </ul>
                    </nav> <!-- nav -->

                    <div>
                        <a href="#"><img src="../static/images/facebook.png" alt="Like us on Facebook"></a>
                        <a href="#"><img src="../static/images/twitter.png" alt="Follow us on Twitter"></a>
                        <a href="#"><img src="../static/images/rss.png" alt="RSS feeds"></a>
                    </div>
                </div>
                <div id="right_container" class="col col-md-9 col-sm-12">
                    <div class="row">
                        <div class="col col-md-12">
                            <h2>数据分析图表</h2>
                        </div>
                         <div>
                            <p style="font-size: 15px;">·PM2.5和PM10是常见的大气颗粒物，它们对空气质量和人体健康有着重要影响。通过分析它们之间的相关系数，可以更好地了解它们之间的关联程度，从而更准确地评估空气质量。</p>
                            <p style="font-size: 15px;">·PM2.5和PM10的来源各不相同，PM2.5主要来自燃烧活动、车辆排放和工业排放，而PM10还包括一些更大的颗粒物。通过分析它们之间的相关系数，可以帮助识别不同来源的污染物对大气颗粒物的贡献程度。</p>
                            <p style="font-size: 15px;">·对PM2.5和PM10的相关系数进行分析可以帮助优化环境监测网络和方案。如果两者之间的相关系数很高，可能意味着它们受到相似的污染源影响，因此可以考虑在监测网络中减少其中一个参数以节省成本，同时仍然保持对空气质量的有效监测。</p>
                            <p style="font-size: 15px;">·PM2.5和PM10对人体健康的影响不同，PM2.5更容易进入肺部深处，对健康危害更大。通过分析它们之间的相关系数，可以更好地评估不同颗粒物大小对健康风险的影响，从而制定更有效的健康保护措施。</p>
                         </div>
                    <div>
                        <form action="/services.html" method="post">
                            <label for="city">选择城市：</label>
                            <select name="city" id="city">
                                <option value="北京">北京</option>
                                <option value="上海">上海</option>
                            </select>
                            <label for="year">选择年份：</label>
                            <select name="year" id="year">
                                <option value="2020">2020</option>
                                <option value="2021">2021</option>
                            </select>
                            <button type="submit">生成图表</button>
                        </form>
                    </div>
                    {% for jsfile_name in script_list %}
                       <script src="{{host}}/{{jsfile_name}}.js"></script>
                    {% endfor %}
                    {{myechart|safe}}


                  <div>
                      <p style="font-size: 20px;">PM2.5和PM10的相关系数为: {{ correlation_coefficient }}</p>
                  </div>
                  <div>
                     <img src="../static/images/{{ city }}{{ year }}heatmap.png" alt="PM2.5和PM10相关性热力图">
                  </div>

                </div>
            </div>
            <footer class="row credit">
                <div class="col col-md-12">
                    <div id="templatemo_footer">
                        Copyright © 2084 <a href="#">Company Name</a>
                    </div>
                </div>
            </footer>
        </div>
    </div>
    </div>
    <!-- templatemo 391 botany -->
</body>
</html>
